<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>微信文章PDF导出 - 最终优化版</title>
  <!-- 加载外部库 -->
  <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
  
  <script>
    // 确保HTML文件能够直接调用
    fetch('index.js')
      .then(response => response.text())
      .then(code => {
        // 提取html2Pdf函数并附加到window对象
        const modifiedCode = code.replace('export function html2Pdf', 'window.html2Pdf = function');
        const scriptEl = document.createElement('script');
        scriptEl.textContent = modifiedCode;
        document.head.appendChild(scriptEl);
        console.log('html2Pdf函数已成功加载');
      })
      .catch(err => console.error('加载html2Pdf函数失败:', err));
  </script>
  
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #f7f7f7;
      font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
    
    /* 模拟微信公众号样式 */
    .rich_media {
      max-width: 677px;
      margin: 0 auto;
      padding: 0 16px;
      background-color: #fff;
      font-size: 17px;
      line-height: 1.8;
      word-wrap: break-word;
      -webkit-hyphens: auto;
      hyphens: auto;
    }
    
    .rich_media_title {
      margin-bottom: 14px;
      line-height: 1.4;
      font-weight: 700;
      font-size: 22px;
      color: #1a1a1a;
      padding-top: 32px;
    }
    
    .rich_media_meta_list {
      margin-bottom: 18px;
      line-height: 20px;
      font-size: 0;
    }
    
    .rich_media_meta {
      display: inline-block;
      vertical-align: middle;
      margin-right: 8px;
      font-size: 14px;
      color: rgba(0,0,0,0.3);
    }
    
    .rich_media_content {
      position: relative;
      color: #333;
      font-size: 17px;
    }
    
    .rich_media_content p {
      clear: both;
      min-height: 1em;
      margin-bottom: 8px;
      page-break-inside: avoid !important;
      break-inside: avoid !important;
    }
    
    .rich_media_content img {
      max-width: 100%!important;
      height: auto!important;
      vertical-align: middle;
      margin: 5px 0;
      page-break-inside: avoid !important;
      break-inside: avoid !important;
      display: block;
    }
    
    .rich_media_content blockquote {
      padding: 10px 15px;
      background-color: #f7f7f7;
      margin: 1em 0;
      border-left: 3px solid #dbdbdb;
      color: #888;
      page-break-inside: avoid !important;
      break-inside: avoid !important;
    }
    
    /* 控制按钮样式 */
    .pdf-controls {
      max-width: 677px;
      margin: 20px auto;
      padding: 16px;
      background: #fff;
      text-align: center;
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    
    .button-primary {
      background-color: #07C160;
      color: white;
      border: none;
      padding: 10px 24px;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
      margin: 0 5px;
    }
    
    .button-primary:hover {
      background-color: #06AD56;
    }
    
    .button-secondary {
      background-color: #f5f5f5;
      color: #333;
      border: 1px solid #ddd;
      padding: 10px 24px;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
      margin: 0 5px;
    }
    
    .button-secondary:hover {
      background-color: #e5e5e5;
    }
    
    .progress {
      display: none;
      margin-top: 10px;
      color: #07C160;
    }

    /* 分页优化的元素样式 */
    .element {
      margin-bottom: 15px;
      page-break-inside: avoid !important;
      break-inside: avoid !important;
      position: relative;
      z-index: 1;
      orphans: 2;
      widows: 2;
    }
    
    /* 针对图片特别处理，确保不被分页 */
    .image-container {
      page-break-inside: avoid !important;
      break-inside: avoid !important;
      page-break-before: auto;
      page-break-after: auto;
      margin: 20px 0;
      text-align: center;
      display: block;
      position: relative;
      z-index: 2;
    }
    
    /* 所有图片容器中的图片也设置为不分页 */
    .image-container img {
      page-break-inside: avoid !important;
      break-inside: avoid !important;
      max-width: 100%;
      max-height: 720px; /* 限制图片高度，防止过大 */
      width: auto;
      display: block;
      margin: 0 auto;
    }

    /* 针对长段落，允许在适当位置分页 */
    .long-paragraph {
      page-break-inside: auto;
      orphans: 3;
      widows: 3;
    }

    /* 文章开始和结尾的额外标记，用于确保页面有足够留白 */
    .article-start {
      height: 20px; /* 减小顶部留白 */
      background-color: #ffffff;
      margin: 0;
      padding: 0;
    }
    
    .article-end {
      height: 20px; /* 减小底部留白 */
      margin: 0;
      padding: 0;
      background-color: #ffffff;
    }
    
    /* 每个页面顶部和底部的留白区域 */
    .page-margin-top {
      height: 20px;
      background-color: #ffffff;
      margin: 0;
      padding: 0;
    }
    
    .page-margin-bottom {
      height: 20px;
      background-color: #ffffff;
      margin: 0;
      padding: 0;
    }

    /* 强制图片避免分页 */
    img {
      page-break-inside: avoid !important;
      break-inside: avoid !important;
      max-width: 100%;
      display: block;
    }
    
    /* 强制处理页面分隔 */
    .page-break {
      page-break-after: always !important;
      break-after: page !important;
      height: 1px;
      margin: 0;
      padding: 0;
      display: block;
      border: none;
      background: transparent;
    }
    
    /* 处理超长文本 */
    p, div {
      overflow-wrap: break-word;
      word-wrap: break-word;
      hyphens: auto;
    }

    /* PDF优化样式 */
    .pdf-element {
      page-break-inside: avoid !important;
      break-inside: avoid !important;
    }
    
    /* 确保标题不会被分页 */
    h1, h2, h3, h4, h5, h6 {
      page-break-after: avoid !important;
      page-break-inside: avoid !important;
      break-after: avoid !important;
      break-inside: avoid !important;
    }
    
    /* 页面指示和调试信息 */
    .pdf-page-indicator {
      display: none;
      padding: 5px 10px;
      background-color: #f0f8ff;
      border-left: 3px solid #4a8dff;
      margin: 10px 0;
      font-size: 14px;
      color: #333;
    }
  </style>
</head>
<body>
  <div class="pdf-controls">
    <h2>微信文章PDF导出工具 - 最终优化版</h2>
    <p>解决了页面顶部和底部贴边问题，优化了分页处理</p>
    <button id="generatePDF" class="button-primary">导出为PDF</button>
    <button id="toggleDebug" class="button-secondary">显示/隐藏页面指示器</button>
    <div id="progress" class="progress">正在生成PDF，请稍候...</div>
  </div>

  <div id="pdfContent">
    <!-- 内容包装器 -->
    <div class="content-wrapper">
      <!-- 页面顶部留白 -->
      <div class="page-margin-top"></div>
      
      <div class="rich_media">
        <!-- 文章开始标记 -->
        <div class="article-start element"></div>
        
        <div class="rich_media_inner">
          <!-- 文章标题 - 每个元素都添加了element类 -->
          <h2 class="rich_media_title element" id="activity-name">不必太张扬，是花自然香</h2>
          
          <!-- 作者信息 -->
          <div class="rich_media_meta_list element">
            <span class="rich_media_meta rich_media_meta_text">热门主题类型</span>
            <span class="rich_media_meta rich_media_meta_nickname">掘金文章精选</span>
          </div>
          
          <!-- 文章正文 -->
          <div class="rich_media_content">
            <!-- 页面指示器 - 默认隐藏 -->
            <div class="page-indicator element" style="display: none;">第1页开始</div>
            
            <p class="element">不必太张扬，是花自然香。这是一句多么富有哲理的话啊！在这个浮躁的社会中，很多人总是喜欢炫耀自己，希望得到别人的赞美和肯定。然而，真正有价值的人和事物，往往不需要过多的张扬，就像花朵一样，自然散发着芬芳。</p>
            
            <!-- 图片容器，确保不分页 -->
            <div class="element image-container">
              <img class="rich_pages" src="https://img2.baidu.com/it/u=363858033,1221485415&fm=253&app=138&f=JPEG?w=800&h=1067" alt="花朵图片">
            </div>
            
            <p class="element">情感类：触动人心的寄语。在现代社会中，人们常常被各种压力和烦恼所困扰，需要一些温暖的文字来抚慰心灵。一段真挚的情感文字，能够触动人心，为读者带来安慰和力量。生活中的好与坏，取决于我们如何看待，如果能够保持积极乐观的心态，那么看到的一切都是美好的。</p>
            
            <blockquote class="element">
              <p>人生在世，终有离散。珍视眼前，不负此生。每一个平凡的日子里，都蕴含着不平凡的意义，只要我们用心去发现和珍惜。</p>
            </blockquote>
            
            <p class="element">生活感悟类：实用与提升并存。生活感悟是我们在生活中的一个缩影，在某一小小的瞬间看透事物本质，给自己内心深处留下的印记。这些感悟往往来源于我们的亲身经历和体会，具有真实性和深刻性，能够引起读者的共鸣和思考。</p>
            
            <!-- 另一个图片容器 -->
            <div class="element image-container">
              <img class="rich_pages" src="https://img2.baidu.com/it/u=363858033,1221485415&fm=253&app=138&f=JPEG?w=800&h=1067" alt="生活场景">
            </div>
            
            <p class="element">在这个快节奏的时代，人们常常被各种压力和焦虑所困扰，内心变得浮躁不安。这时，我们更需要一些能够触动心灵的文字，来安抚我们的情绪，给我们带来力量和希望。情感类文章正是这样的存在，它们通过真挚的情感表达，直击读者内心，引发共鸣和思考。</p>
            
            <p class="element">每个人都有自己的生活方式和生活态度。有人喜欢张扬，有人偏爱低调；有人追求物质，有人崇尚精神；有人忙于奔波，有人享受宁静。无论选择哪种方式，最重要的是要做真实的自己，不盲目跟风，不刻意张扬，保持一颗平常心，活出属于自己的精彩。</p>
            
            <!-- 页面指示器 - 默认隐藏 -->
            <div class="page-indicator element" style="display: none;">第2页开始</div>
            
            <p class="element">情感类文章需要触动读者心弦，需要有共鸣，有感悟，有启示。对于年轻人来说，爱情、亲情和友情都是他们关注的话题。这些话题能够引起读者的共鸣，让他们在阅读中找到自己的影子，从而产生情感上的共鸣和认同。</p>
            
            <p class="element">写作类：每日一记，记录美好。写作的魅力在于，它可以让我们跨越时空，与过去的自己对话，也与未来的自己相遇。通过文字，我们可以记录下生活中的点点滴滴，留下珍贵的回忆，也可以表达自己的思想和情感，与他人分享和交流。</p>
            
            <!-- 第三个图片容器 -->
            <div class="element image-container">
              <img class="rich_pages" src="https://img2.baidu.com/it/u=363858033,1221485415&fm=253&app=138&f=JPEG?w=800&h=1067" alt="写作场景">
            </div>
            
            <p class="element">在这个信息爆炸的时代，我们需要静下心来，去思考生活的真谛，去感受生活的美好。不必太张扬，做自己就好；不必太功利，活得简单就好；不必太计较，开心就好。生活本就是一场修行，在不断的经历中成长，在不断的反思中进步。</p>
            
            <p class="element">每个人的一生中，都会经历无数次选择，每一次选择都会导向不同的人生道路。有时，我们会为自己的选择感到后悔，但其实每一次选择都有其意义所在。重要的不是选择的结果，而是我们在做出选择的过程中，所持有的态度和价值观。</p>
            
            <!-- 页面指示器 - 默认隐藏 -->
            <div class="page-indicator element" style="display: none;">第3页开始</div>
            
            <!-- 长段落，允许在必要时分页 -->
            <p class="element">
              最后，希望每位读者都能在自己的人生道路上，找到属于自己的那朵花，不张扬，却自然散发芬芳，成为自己生命中最美的风景。不必刻意追求什么，保持一颗平常心，做好自己该做的事情，自然会有属于自己的美丽绽放。
              记得有人说过，最好的生活状态，不是外表光鲜，而是内心从容。不是有很多人羡慕你，而是有几个人真正懂你。不是走到哪里都光彩夺目，而是在某个人心里熠熠生辉。
              所以，愿你我都能做到：不必太张扬，如花自然香；不必太浮躁，如水自然静；不必太张扬，如松自然直；不必太功利，如云自然舒。让我们把握当下，珍惜现有，用心生活，静待花开，做一个内心丰盈、从容淡定的人。
            </p>
            
            <!-- 又一个图片容器 -->
            <div class="element image-container">
              <img class="rich_pages" src="https://img2.baidu.com/it/u=363858033,1221485415&fm=253&app=138&f=JPEG?w=800&h=1067" alt="生活感悟">
            </div>
            
            <p class="element">生活不止眼前的苟且，还有诗和远方。每一次经历，无论是喜悦还是痛苦，都是我们生命中宝贵的财富。它们让我们更加坚强，更加智慧，更加懂得珍惜。愿我们都能在平凡的日子里，发现不平凡的美好，创造属于自己的精彩人生。</p>
             <!-- 又一个图片容器 -->
             <div class="element image-container">
              <img class="rich_pages" src="https://img2.baidu.com/it/u=363858033,1221485415&fm=253&app=138&f=JPEG?w=800&h=1067" alt="生活感悟">
            </div>
            <!-- 页面指示器 - 默认隐藏 -->
            <div class="page-indicator element" style="display: none;">第4页开始</div>
            
            <p class="element">生活不止眼前的苟且，还有诗和远方。每一次经历，无论是喜悦还是痛苦，都是我们生命中宝贵的财富。它们让我们更加坚强，更加智慧，更加懂得珍惜。愿我们都能在平凡的日子里，发现不平凡的美好，创造属于自己的精彩人生。生活不止眼前的苟且，还有诗和远方。每一次经历，无论是喜悦还是痛苦，都是我们生命中宝贵的财富。它们让我们更加坚强，更加智慧，更加懂得珍惜。愿我们都能在平凡的日子里，发现不平凡的美好，创造属于自己的精彩人生。</p>
            
            <p class="element">生活不止眼前的苟且，生活不止眼前的苟且生活不止眼前的苟且生活不止眼前的苟且生活不止眼前的苟且生活不止眼前的苟且生活不止眼前的苟且生活不止眼前的苟且还有诗和远方。每一次经历，无论是喜悦还是痛苦，都是我们生命中宝贵的财富。它们让我们更加坚强，更加智慧，更加懂得珍惜。愿我们都能在平凡的日子里，发现不平凡的美好，创造属于自己的精彩人生。</p>
            <div class="element image-container">
              <img class="rich_pages" src="https://img2.baidu.com/it/u=363858033,1221485415&fm=253&app=138&f=JPEG?w=800&h=1067" alt="生活感悟">
            </div>
            <p class="element">生活不止眼前的苟且，还有诗和远方。每一次经历，无论是喜悦还是痛苦，都是我们生命中宝贵的财富。它们让我们更加坚强，更加智慧，更加懂得珍惜。愿我们都能在平凡的日子里，发现不平凡的美好，创造属于自己的精彩人生。</p>
            
            <p class="element">
              生活不止眼前的苟且，还有诗和远方。每一次经历，无论是喜悦还是痛苦，都是我们生命中宝贵的财富。它们让我们更加坚强，更加智慧，更加懂得珍惜。愿我们都能在平凡的日子里，发现不平凡的美好，创造属于自己的精彩人生。生活不止眼前的苟且，还有诗和远方。每一次经历，无论是喜悦还是痛苦，都是我们生命中宝贵的财富。它们让我们更加坚强，更加智慧，更加懂得珍惜。愿我们都能在平凡的日子里，发现不平凡的美好，创造属于自己的精彩人生。
            </p>
            
            <p class="element">这是文章的最后一段。通过以上内容，我们可以看到，不必太张扬，是花自然香，这句话蕴含着深刻的人生智慧。希望每一位读者都能在自己的生活中，找到属于自己的那份宁静与从容，活出真实而精彩的自己。</p>
          </div>
        </div>
        
        <!-- 文章结束标记 -->
        <div class="article-end element"></div>
      </div>
      
      <!-- 页面底部留白 -->
      <div class="page-margin-bottom"></div>
    </div>
  </div>

  <script>
    // 处理微信公众号文章中的元素
    function processWechatArticle(article) {
      // 1. 图片处理 - 确保所有图片容器都有正确的类
      const imageContainers = article.querySelectorAll('.image-container');
      imageContainers.forEach(container => {
        container.classList.add('element', 'pdf-element');
        // 添加强制不分页样式
        container.style.pageBreakInside = 'avoid !important';
        container.style.breakInside = 'avoid !important';
        
        // 压缩图片容器间距
        container.style.margin = '5px 0';
        
        // 处理容器内的图片
        const img = container.querySelector('img');
        if (img) {
          img.style.pageBreakInside = 'avoid !important';
          img.style.breakInside = 'avoid !important';
          img.style.display = 'block';
          img.style.margin = '0 auto';
          
          // 检查图片高度，智能调整大小
          const handleImageSize = () => {
            // 获取A4页面的有效高度(减去页眉页脚)
            const effectivePageHeight = 841.89 - 60; // A4高度减去页眉页脚
            
            if (img.naturalHeight > 0) {
              const imgRatio = img.naturalWidth / img.naturalHeight;
              
              // 如果图片太大，根据图片比例智能调整
              if (img.naturalHeight > effectivePageHeight * 0.8) {
                const maxHeight = effectivePageHeight * 0.6; // 降低图片高度
                img.style.maxHeight = `${maxHeight}px`;
                img.style.width = 'auto';
                
                // 对于宽高比大的图片需要限制宽度
                if (imgRatio > 2) {
                  img.style.maxWidth = '95%';
                }
                
                console.log(`调整了大图片尺寸: ${img.src}`);
              }
            }
          };
          
          // 如果图片已加载
          if (img.complete && img.naturalHeight > 0) {
            handleImageSize();
          } else {
            // 为图片添加加载事件
            img.onload = handleImageSize;
          }
        }
      });
      
      // 2. 检查所有段落并添加合适的类
      const paragraphs = article.querySelectorAll('p:not(.element)');
      paragraphs.forEach(p => {
        p.classList.add('element', 'pdf-element');
        p.style.pageBreakInside = 'avoid !important';
        p.style.breakInside = 'avoid !important';
        // 减小段落间距
        p.style.margin = '0 0 8px 0';
        p.style.padding = '0';
        
        // 检查段落长度，超长段落特殊处理
        if (p.textContent.length > 300) {
          p.classList.add('long-paragraph');
        }
      });
      
      // 3. 处理其他文本元素
      const textElements = article.querySelectorAll('h1, h2, h3, h4, h5, h6, blockquote');
      textElements.forEach(el => {
        el.classList.add('element', 'pdf-element');
        el.style.pageBreakInside = 'avoid !important';
        el.style.breakInside = 'avoid !important';
        // 减小标题间距
        el.style.marginBottom = '8px';
      });
      
      // 4. 处理直接添加的img标签
      const images = article.querySelectorAll('img:not(.image-container img)');
      images.forEach(img => {
        // 如果图片不在.image-container中，为其创建容器
        if (!img.closest('.image-container')) {
          const container = document.createElement('div');
          container.className = 'element image-container pdf-element';
          container.style.pageBreakInside = 'avoid !important';
          container.style.breakInside = 'avoid !important';
          
          // 替换原始图片
          img.parentNode.insertBefore(container, img);
          container.appendChild(img);
        }
      });
      
      // 5. 动态计算分页 - 使用更智能的分页算法
      function addIntelligentPageBreaks() {
        // 删除现有的分页符，以便重新计算
        const existingBreaks = article.querySelectorAll('.page-break');
        existingBreaks.forEach(br => br.parentNode.removeChild(br));
        
        // 获取A4页面的有效高度
        const pageHeight = 841.89 - 60; // A4高度减去页眉页脚
        
        // 获取所有内容元素
        const allElements = article.querySelectorAll('.element');
        let currentHeight = 0;
        let pageNum = 1;
        
        // 添加页面指示器函数
        function addPageIndicator(element, num) {
          const indicator = document.createElement('div');
          indicator.className = 'pdf-page-indicator';
          indicator.style.display = 'none';
          indicator.textContent = `第${num}页`;
          // 减小指示器间距
          indicator.style.margin = '5px 0';
          indicator.style.padding = '3px 8px';
          element.parentNode.insertBefore(indicator, element);
        }
        
        // 在第一个元素前添加页面指示器
        if (allElements.length > 0) {
          addPageIndicator(allElements[0], pageNum);
        }
        
        allElements.forEach((element, index) => {
          // 获取元素高度
          const elementHeight = element.offsetHeight || 20; // 默认最小高度
          
          // 判断是否需要分页
          const isImage = element.classList.contains('image-container') || 
                          element.querySelector('img') !== null;
          const isLargeElement = elementHeight > pageHeight * 0.7;
          const isStartOfContent = currentHeight < 50; // 避免在页面开头就分页
          
          // 分页条件:
          // 1. 累计高度超过页面有效高度的95%（更紧凑）
          // 2. 或者遇到图片且当前已使用了70%页面高度
          // 3. 且不是页面开始位置
          const shouldBreak = (currentHeight + elementHeight > pageHeight * 0.95 || 
                               (isImage && currentHeight > pageHeight * 0.7)) && 
                               !isStartOfContent;
          
          if (shouldBreak) {
            // 创建分页符，使用更紧凑的样式
            const pageBreak = document.createElement('div');
            pageBreak.className = 'page-break';
            pageBreak.style.height = '0';
            pageBreak.style.margin = '0';
            pageBreak.style.padding = '0';
            element.parentNode.insertBefore(pageBreak, element);
            
            // 递增页码并重置高度
            pageNum++;
            currentHeight = 0;
            
            // 在新页面添加页码指示器
            addPageIndicator(element, pageNum);
          }
          
          // 累加当前高度
          currentHeight += elementHeight;
          
          // 特别处理: 大图片或超长元素后强制分页
          if ((isImage && elementHeight > pageHeight * 0.6) || isLargeElement) {
            currentHeight = pageHeight; // 强制下一个元素分页
          }
        });
        
        return pageNum; // 返回总页数
      }
      
      // 应用智能分页
      const totalPages = addIntelligentPageBreaks();
      console.log(`智能分页完成，共 ${totalPages} 页`);
      
      return article;
    }
    
    // 生成PDF函数
    function generatePDF() {
      const progress = document.getElementById('progress');
      const pdfContent = document.getElementById('pdfContent');
      const generateButton = document.getElementById('generatePDF');
      
      // 显示进度提示
      progress.style.display = 'block';
      progress.textContent = '正在生成PDF，请稍候...';
      generateButton.disabled = true;
      
      // 检查html2Pdf函数是否已加载
      if (typeof window.html2Pdf !== 'function') {
        progress.textContent = '正在等待HTML2PDF函数加载，请稍候...';
        
        // 等待函数加载完成
        const checkInterval = setInterval(() => {
          if (typeof window.html2Pdf === 'function') {
            clearInterval(checkInterval);
            progress.textContent = 'HTML2PDF函数已加载，开始生成PDF...';
            setTimeout(() => startPdfGeneration(), 500);
          }
        }, 200);
      } else {
        startPdfGeneration();
      }
      
      function startPdfGeneration() {
        try {
          // 预处理文章内容
          progress.textContent = '正在处理文章内容...';
          processWechatArticle(pdfContent);
          
          // 延迟一下，确保DOM更新完成
          setTimeout(() => {
            progress.textContent = '正在生成PDF，请稍候...';
            
            // 调用html2Pdf函数生成PDF
            window.html2Pdf(pdfContent, 50, '微信文章优化版PDF')
              .then((result) => {
                // 完成后恢复按钮状态
                generateButton.disabled = false;
                progress.style.display = 'block';
                progress.style.color = '#07C160';
                progress.textContent = 'PDF生成完成！';
                setTimeout(() => {
                  progress.style.display = 'none';
                }, 3000);
              })
              .catch(err => {
                console.error('PDF生成失败:', err);
                showError('PDF生成失败: ' + (err.message || err));
              });
          }, 500);
        } catch (err) {
          console.error('PDF生成调用异常:', err);
          showError('PDF生成调用异常: ' + (err.message || err));
        }
      }
      
      function showError(message) {
        generateButton.disabled = false;
        progress.style.display = 'block';
        progress.style.color = 'red';
        progress.textContent = message;
        console.error(message);
      }
    }
    
    // 显示/隐藏页面指示器
    function toggleDebugMarkers() {
      const indicators = document.querySelectorAll('.page-indicator, .pdf-page-indicator');
      indicators.forEach(indicator => {
        indicator.style.display = indicator.style.display === 'none' ? 'block' : 'none';
      });
    }
    
    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
      // 绑定事件
      document.getElementById('generatePDF').addEventListener('click', generatePDF);
      document.getElementById('toggleDebug').addEventListener('click', toggleDebugMarkers);
      
      // 预处理文章，确保所有图片都有正确的容器
      processWechatArticle(document.getElementById('pdfContent'));
      console.log('文章内容预处理完成');
    });
  </script>
</body>
</html> 